<!--教学研究情况-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div class="search-container-item right20">
        <div class="item-name">立项年份：</div>
          <el-date-picker class="time" v-model="dataForm.lxnf"  type="year" value-format="yyyy"></el-date-picker>
      </div>
      <div class="search-container-item right20">
        <div class="item-name">系：</div>
        <el-select v-model="dataForm.xi" placeholder="请选择" class="width110" size="mini">
            <el-option v-for="item in xi" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right20">
        <div class="item-name">教研室：</div>
        <el-select v-model="dataForm.jys" placeholder="请选择" class="width110" size="mini">
            <el-option v-for="item in jys" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right20">
        <div class="item-name">教员姓名：</div>
        <el-input size="mini" class="width110" v-model="dataForm.jyxm" ></el-input>
      </div>
      <div class="search-button color-primary width70 right20" @click="initList">
        <img src="../../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
      <div class="search-button color-green right20" @click="givenInfo">
        <span>授予权限</span>
      </div>
      <el-upload class="upload-demo" :action="fileUrl" :show-file-list="false" :on-success="successFile" :headers="headers"
         accept=".xls,.xlsx" :on-change="fileInfo" >
        <div class="search-button color-yellow right20">
          <img src="../../../assets/assessment/icon-import.png" alt="" />
          <span>教学研究情况</span>
        </div>
      </el-upload>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}">
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <span class="small-btn color-green right22" style="width:82px" @click="editInfo(scope.row.researchId)">
              <img src="../../../assets/assessment/icon-plan-record-detail.png"> 修改
            </span>
            <span class="small-btn delete-red" @click="delInfo(scope.row.researchId)">
              <img src="../../../assets/assessment/icon-delete.png"> 删除
            </span>
          </template>
        </el-table-column>
        <el-table-column label="立项年份" align="center" width="120" prop="lxnf"></el-table-column>
        <el-table-column label="系" align="center" width="100" prop="xi"></el-table-column>
        <el-table-column label="教研室" align="center" width="120" prop="jys"></el-table-column>
        <el-table-column label="教员姓名" align="center" prop="jyxm"></el-table-column>
        <el-table-column label="级别" prop="jiBie" align="center" ></el-table-column>
        <el-table-column label="等级" prop="dengJi" align="center" width="100"></el-table-column>
        <el-table-column label="排名/总人数" prop="pmZrs"  align="center" ></el-table-column>
        <el-table-column label="教学研究类别" prop="jxyjlb" align="center" ></el-table-column>
        <el-table-column label="成果名称" prop="cgmc" align="center" ></el-table-column>
        <el-table-column label="结项时间" prop="jxsj" align="center" ></el-table-column>
      </el-table>
    </div>
    <div class="export-button" @click="importExcel" style="width:150px">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <span>导出Excel</span>
    </div>
    <h1 class="total-notice">当前共找到{{total}}条记录，当前显示{{(dataForm.current-1)*50 == 0?0:(dataForm.current-1)*50}}-{{total>50?dataForm.current*50:total}}条</h1>
    <div class="pagination-block">
        <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
        :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!-- 修改弹窗 -->
    <el-dialog title="修改" :visible.sync="dialogVisible" :close-on-click-modal="false" width="60%">
      <div class="my-form-container" style="height:602px;width:80%">
        <el-form ref="ruleForm" :model="ruleForm" class="demo-ruleForm">
          <el-row class="my-form-item">
            <el-col :span="24">
              <div class="my-form-item-label">立项年份</div>
              <el-form-item  prop="rdname">
                <div class="my-form-item-value">
                    <el-input v-model="ruleForm.lxnf"></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
            <el-row class="my-form-item">
              <el-col :span="24">
                <div class="my-form-item-label">系</div>
                <el-form-item  prop="rdtype">
                  <div class="my-form-item-value">
                    <el-input v-model="ruleForm.xi"></el-input>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="my-form-item">
              <el-col :span="23">
                <div class="my-form-item-label">教研室</div>
                <el-form-item  prop="rdtype">
                  <div class="my-form-item-value">
                    <el-input v-model="ruleForm.jys"></el-input>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="my-form-item">
              <el-col :span="24">
                <div class="my-form-item-label">教员姓名</div>
                <el-form-item  prop="reason">
                    <div class="my-form-item-value">
                        <el-input v-model="ruleForm.jyxm"></el-input>
                    </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="my-form-item">
              <el-col :span="24">
                <div class="my-form-item-label">级别</div>
                <el-form-item  prop="reason">
                    <div class="my-form-item-value">
                        <el-input v-model="ruleForm.jiBie"></el-input>
                    </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="my-form-item">
              <el-col :span="24">
                <div class="my-form-item-label">等级</div>
                <el-form-item  prop="reason">
                    <div class="my-form-item-value">
                        <el-input v-model="ruleForm.dengJi"></el-input>
                    </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="my-form-item">
              <el-col :span="24">
                <div class="my-form-item-label">排名/总人数</div>
                <el-form-item  prop="reason">
                    <div class="my-form-item-value">
                        <el-input v-model="ruleForm.pmZrs"></el-input>
                    </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="my-form-item">
              <el-col :span="24">
                <div class="my-form-item-label">教学研究类别</div>
                <el-form-item  prop="reason">
                    <div class="my-form-item-value">
                        <el-input v-model="ruleForm.jxyjlb"></el-input>
                    </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="my-form-item">
              <el-col :span="24">
                <div class="my-form-item-label">成果名称</div>
                <el-form-item  prop="reason">
                    <div class="my-form-item-value">
                        <el-input v-model="ruleForm.cgmc"></el-input>
                    </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="my-form-item" style="border:none">
              <el-col :span="24">
                <div class="my-form-item-label">结项时间</div>
                <el-form-item  prop="reason">
                    <div class="my-form-item-value">
                        <el-input v-model="ruleForm.jxsj"></el-input>
                    </div>
                </el-form-item>
              </el-col>
            </el-row>
        </el-form>
		  </div>
      <div slot="footer" class="button-group">
        <div class="right120" @click="saveEdit">保存</div>
        <div @click="dialogVisible=false">取消</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {researchList,researchInfo,editResearch,deleteResearch,teacherList} from "@/api/teaching";
import fileDownload from "js-file-download"
import Axios from 'axios'
import { getToken } from '@/util/auth';
export default {
  data() {
    return {
      xi:[],
      jys:[],
      dialogVisible:false,
      dataForm:{
        current:1,
        xi:'',//系
        jys:'',//教研室
        jyxm:'',//教员姓名
        lxnf:'',//立项年份
      },
      ruleForm:{},
      tableData: [],
      xueqiID:'',
      total:1,
      fileUrl:'',
      headers:{}
    };
  },
  mounted(){
    this.initList()
    this.teacherInfo();
    this.headers = {'Xpaas-Auth':'bearer ' + getToken()}
    this.dataForm.lxnf = new Date().getFullYear()+''
  },
  methods: {
      //当前页
    currentPage(e){
      this.dataForm.current = e;
      this.initList()
    },
    //初始化表格
    async initList(){
      let res = await researchList(this.dataForm);
      if(res.code == 200){
        this.tableData = res.data.records;
        this.total = res.data.total
      }else{
        this.$message.error(res.msg);
      }
      this.fileUrl = this.$store.state.studentUrl.baseUrl+'/kpiResearch/importExcel'
    },
    async teacherInfo(){
      let res = await teacherList();
      if(res.code == 200){
        this.dataForm.xi = res.data.isAdmin !=='1'? res.data.xi:'';
        this.dataForm.jys = res.data.isAdmin !=='1'? res.data.jys:'';
        //系列表
        this.commonApi.getXIOption().then(res=>{
          this.xi = res.data
        })
        //获取教研室
        this.commonApi.getJYSOption().then(res=>{
          this.jys = res.data
        })
      }
    },
    async editInfo(id){
      let res = await researchInfo({researchId:id});
      if(res.code == 200){
        this.dialogVisible = true;
        this.ruleForm = res.data;
      }
    },
    async saveEdit(){
      let res = await editResearch(this.ruleForm)
      if(res.code == 200){
        this.$message.success('修改成功！')
        this.dialogVisible = false;
        this.initList()
      }
    },
    delInfo(id){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        console.log(id)
        let res = await deleteResearch({researchId:id})
        if(res.code == 200){
          this.$message.success('删除成功！');
          this.initList()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        }); 
      });
    },
    //导出
    importExcel(){
      Axios({
          method: 'get',
          url: this.$store.state.studentUrl.baseUrl+'/kpiResearch/exportData',
          params:this.dataForm,
          headers: {'Content-Type': 'application/octet-stream' },
              responseType: 'blob'
      }).then(res => {
          fileDownload(res.data, '教学研究情况.xlsx');
      }); 
    },
    givenInfo(){
      this.$router.push({
        path:'/teaching/performance/qxSee1'
      })
    },
    successFile(response, file, fileList){
      this.$message.success('导入成功!');
      this.initList()
    },
    fileInfo(file){
        if(file.name.indexOf("xlsx") == -1 && file.name.indexOf("xls") == -1){
            this.$message.error('请上传excl文件');
        }else{
            this.fileName = file.name;
        }
    },
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
 /deep/ .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
 /deep/ .el-table__footer-wrapper td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table thead.is-group th.el-table__cell{
    border-color: #c7d7eb;
  }
 /deep/ .el-table--border th, .el-table__fixed-right-patch{
    border-color: #c7d7eb;
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.right20{margin-right: 20px;}
.width70{width: 70px;}
.search-container {justify-content: flex-start !important;}
.width110{width: 110px;}
.color-green{
    width: 94px;
    background: #F1FFF8;
    border: 1px solid #02C86C;
    color: #02C86C;
}
.color-yellow{
    width: 140px;
    background: #FEF1E8;
    border: 1px solid #F86900;
    color: #F86900;
}
.delete-red{
    margin-top: 10px;
    color: #FA5339;
    background: #FFEFEF;
    border: 1px solid #FA5339;
}
/deep/.my-form-container .my-form-item > div .my-form-item-label{
  padding-left: 0;
  justify-content: center;
}
/deep/.button-group{
  padding-bottom: 26px;
  margin-top: 0;
}
.time{
  /deep/.el-input__inner{
    height: 28px!important;
    line-height: 28px!important;
  }
  /deep/.el-input__icon{line-height: 28px!important;}
}
</style>
